<template>
  <div id="blog">
    <div class="bg_wrap">
      <header style="text-align:left">
        <a-input style="margin:20px;max-width:500px" v-model="input_title" placeholder="标题" />
      </header>
      <div class="mavonEditor" style="margin:10px">
        <no-ssr>
          <mavon-editor  :ishljs="true" :toolbars="markdownOption" v-model="handbook" @change="change"/>
        </no-ssr>
      </div>

      <a-button class="commitbtn" type="primary" @click="addBlog">
      {{btnText}}
    </a-button>
    </div>


  </div>
</template>

<script>
import {addBlog,getBlogById,editBlog} from '../api/api'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import msgTip from '../msgTip'
export default {
  name: 'EditBlog',
  // 注册
  components: {
    mavonEditor
  },
  data () {
    return {
      content: '', // 输入的markdown
      html: '', // 及时转的html
      input_title: '',
      handbook: '',
      btnText: '发表',
      markdownOption: {
        // toolbars: {
        bold: false, // 粗体
        italic: false, // 斜体
        header: false, // 标题
        underline: false, // 下划线
        strikethrough: false, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: false, // 引用
        ol: false, // 有序列表
        ul: false, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: false, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: false, // 左对齐
        aligncenter: false, // 居中
        alignright: false, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
        // },
      }

    }
  },
  methods: {
    // 所有操作都会被解析重新渲染
    change (value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render
    //   console.log(render)
    },


    /**
     * 添加
     */
    addBlog () { // 添加提交
    // console.log(this.handbook);
      if(this.input_title=="" || this.html=="") {
        this.$message.warn("标题和内容不能为空！");
        return;
      }

      let loginParams = {
          title: this.input_title,
          content: this.html,
          nativeContent:this.handbook,
          uid:localStorage.getItem("uid")};

      if(this.$route.query.id){
        this.updateBlog (loginParams);
        return;
      }


      addBlog(JSON.stringify(loginParams)).then(data => {
          console.log(data);
          this.checkStatus(data.code);
          if(data.code==200){
            this.$message.success("上传成功！");
            setTimeout(() => {
              this.input_title = "";
              this.handbook = "";
            }, 1000)
          }else{
            this.$message.error("上传失败!")
          }
      });
    },


    /**
     * 根据id查询
     */
    queryById () {
      this.input_title = "123";
      let _this = this;
        if(!this.$route.query.id) {
           this.$message.warn("获取id失败");
           return;
        }
        let ids = {
          id:this.$route.query.id
        };
        getBlogById(ids).then(res => {
            this.checkStatus(res.data.code);
          let content = res.data.list.nativeContent;
          console.log(content);
          _this.handbook = content;
          _this.input_title = res.data.list.title;
        })
    },

    /**
     * 更新
     */
    updateBlog (loginParams) {
      loginParams.id = this.$route.query.id;
      editBlog(JSON.stringify(loginParams)).then(data => {
          this.checkStatus(data.code);
        if(data.code==200){
            this.$message.success("更新成功！");
            setTimeout(() => {
              this.input_title = "";
              this.handbook = "";
            }, 1000)
          }else{
            this.$message.error("更新失败!")
          }
      })
    }
  },
  mounted () {
    console.log(this.$route.query.id);
    if(this.$route.query.id){
      this.btnText = "更新";
      this.queryById();
    }
  },
  created () {

  }
}
</script>

<style lang="">

.commitbtn{
  position: relative;
  right: 40%;
  top: 20px;
}
</style>
